<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>用户分组管理</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app" class="page-container" v-cloak>
      <div class="page-content">
        <el-row :gutter="10">
          <!-- 页面标题 -->
          <el-col :span="24">
            <div class="panel-title">用户分组管理</div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <!-- 组列表 -->
          <el-col :span="6">
            <div class="panel-container">
              <el-button type="primary" size="mini" @click="handleGroupAdd">
                新建组
              </el-button>
              <div class="group-list">
                <div
                  class="group-item"
                  :class="{ active: currentGroup.id === item.id }"
                  v-for="item in groupList"
                  :key="item.id"
                  @click="handleGroupClick(item)"
                >
                  <p class="group-name" :title="item.name">{{ item.name }}</p>
                  <p class="group-button">
                    <i
                      class="el-icon-edit-outline"
                      @click.stop="handleGroupEdit(item)"
                    ></i>
                    <i
                      class="el-icon-delete"
                      @click.stop="handleGroupDelete(item)"
                    ></i>
                  </p>
                </div>
                <div class="empty" v-if="groupList.length === 0">暂无数据</div>
              </div>
            </div>
          </el-col>
          <!-- 组用户列表 -->
          <el-col :span="18">
            <div class="panel-container panel-right">
              <div class="panel-line space-between">
                <div class="group-title">
                  组名：{{ currentGroup && currentGroup.name }}
                </div>
                <el-button
                  :disabled="!currentGroup || !currentGroup.id"
                  type="primary"
                  size="mini"
                  @click="handleUserAdd"
                >
                  添加用户
                </el-button>
              </div>
              <el-table
                stripe
                :data="groupUserTable.list"
                size="mini"
                :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
                ref="groupUserTable"
                style="width: 100%"
                v-loading="groupUserTable.loading"
              >
                <el-table-column
                  type="index"
                  fixed="left"
                  width="55"
                  label="序号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="姓名"
                  prop="name"
                ></el-table-column>
                <el-table-column
                  align="center"
                  header-align="center"
                  label="手机号"
                  prop="phone"
                ></el-table-column>
                <el-table-column
                  align="center"
                  fixed="right"
                  header-align="center"
                  label="操作"
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      @click="handleUserDelete(scope)"
                      class="button-danger"
                      >移除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                small
                background
                :current-page="groupUserTable.pageNumber"
                :page-size="groupUserTable.pageSize"
                :page-sizes="[10, 20, 50, 100]"
                :total="groupUserTable.total"
                @current-change="currentChangeHandle('groupUserTable', $event)"
                @size-change="sizeChangeHandle('groupUserTable', $event)"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; text-align: right"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>

      <!--  新增分组 -->
      <el-dialog
        :title="editModelGroup === 'edit' ? '编辑分组' : '新增分组'"
        :visible.sync="showDialogAddGroup"
      >
        <div class="dialog-content" v-if="showDialogAddGroup">
          <el-form
            :model="addGroupForm"
            :rules="addGroupRules"
            size="mini"
            ref="addGroupFormRef"
            label-width="60px"
          >
            <el-form-item label="组名" prop="name">
              <el-input
                v-model="addGroupForm.name"
                maxlength="50"
                @keydown.native="handleKeyDown"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="panel-line flex-end">
                <el-button @click="cancelAddGroupForm">取消</el-button>
                <el-button type="primary" @click="submitAddGroupForm"
                  >确定</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

      <!--  新增用户 -->
      <el-dialog
        title="新增用户"
        :visible.sync="showDialogAddUser"
        width="80%"
        top="5%"
        @close="handleUserAddClose"
      >
        <div class="dialog-content" v-if="showDialogAddUser">
          <el-form
            :model="filterUserForm"
            size="mini"
            :inline="true"
            ref="filterUserFormRef"
          >
            <el-form-item label="分类:" prop="cate">
              <el-cascader
                v-model="filterUserForm.cate"
                clearable
                :options="cateOption"
                collapse-tags
                :props="cateProps"
                @change="submitFilterUserForm"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="地区:" prop="area">
              <el-cascader
                v-model="filterUserForm.area"
                clearable
                :options="areaOption"
                collapse-tags
                :props="areaProps"
                @change="submitFilterUserForm"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="用户姓名:" prop="name">
              <el-input
                v-model="filterUserForm.name"
                maxlength="50"
                @blur="submitFilterUserForm"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否绑定服务号:" prop="bind_service">
              <el-select
                v-model="filterUserForm.bind_service"
                @change="submitFilterUserForm"
                clearable
              >
                <el-option label="已绑定" :value="1"></el-option>
                <el-option label="未绑定" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="panel-line flex-end">
                <el-button type="primary" @click="submitFilterUserForm"
                  >查询</el-button
                >
                <el-button @click="resetFilterUserForm">重置</el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-table
            stripe
            :data="allUserTable.list"
            size="mini"
            :header-cell-style="{ background: '#F5F5F5', color: '#000000' }"
            ref="allUserTable"
            style="width: 100%"
            v-loading="allUserTable.loading"
          >
            <el-table-column type="index" fixed="left" width="55" label="序号">
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="姓名"
              prop="name"
            ></el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="是否绑定服务号"
              prop="bind_service"
            >
              <template slot-scope="scope">
                {{ scope.row.bind_service === 0 ? '未绑定' : '已绑定' }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="是否绑定APP"
              prop="bind_app"
            >
              <template slot-scope="scope">
                {{ scope.row.bind_app === 0 ? '未绑定' : '已绑定' }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              header-align="center"
              label="操作"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.state === 0"
                  type="text"
                  @click="handleUserAddToGroup(scope)"
                  >添加</el-button
                >
                <el-button v-else type="text" disabled>已添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            small
            background
            :current-page="allUserTable.pageNumber"
            :page-size="allUserTable.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="allUserTable.total"
            @current-change="currentChangeHandle('allUserTable', $event)"
            @size-change="sizeChangeHandle('allUserTable', $event)"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px; text-align: right"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
